<template id="list">
    <div>
      <div id="list_l">
          <div class="list_top">
                <h3 id="tag_name">{{cat_name}}</h3>
              <img src="../image/blue_da.png" alt="" @click="getListDetail()">
          </div>
        <!--1-->
        <!--动态切换-->
        <div class="swiper-container" id="list_lis">
				<div class="swiper-wrapper">
                    <div class="swiper-slide" @click="catSwitch(k)" v-for="(v,k) in data.cat_list">
                        <span v-bind:id="k == cat_id ? 'catSelected' : ''">{{v}}</span>
                    </div>

				</div>
        </div>
       <!--1-->
        <div class="list_Sales">
            <span @click="orderBy(1)" v-bind:class="[style_1]">综合</span>
            <span @click="orderBy(2)" v-bind:class="[style_2]">销量</span>
            <span @click="orderBy(data.sort == 3 ? 4 : 3)" v-bind:class="[style_3]">价格<img src="../image/Arrow.jpg" alt=""></span>
        </div>
          <div id="list_m">
        <div >
            <div class="Kiwifruit_list" v-for="(v,index) in goods_list">
                <div @click="goods_info(v.goods_id)">
                <div class="Kiwifruit_left">
                    <img  v-lazy="v.goods_thumb" alt="" v-bind:id="'img'+v.goods_id">
                    <span class="wen_zi_m" v-if="v.discount">{{v.discount}}</span>
                </div>
                <div class="Kiwifruit_right">
                    <p>{{v.goods_name}}</p>
                    <p>{{v.goods_brief}}</p>
                    <p v-show="v.goods_type == 1">{{v.goods_share}} <!--{{v.goods_weight}}kg--></p>
                    <p><time>¥</time>{{v.shop_price}}<span v-if="v.goods_type == 2">起</span></p>
                </div>
                </div>
                <div class="Kiwifruit_all">
                    <img @click="v.goods_type == 1 ? addCart(v.goods_id) : goods_info(v.goods_id)" src="../image/gou.png" alt="">
                </div>
            </div>
        </div>
         <div class="tl"></div>
        <div id='commodity_more' v-show="data.page < data.page_count">
            <p @click="getMore();">加载更多</p>
        </div>
      </div>
    </div>
        <v-shopCar></v-shopCar>
    </div>
</template>
<script>
    import shopCar from './shopCar.vue';
    export default {
        name: 'list',
        data() {
            return {
                cat_id:this.$route.query.cat_id,
                cat_name:'',
                data: [],
                goods_list: [],
                style_1:'',
                style_2:"",
                style_3:"",
                type:'',
            }
        },
        components:{
            'v-shopCar':shopCar,
        },
        mounted:function () {
            /*导航栏切换*/
            this.initView();
            /*结尾*/
            this.goodsList(this.cat_id);

        },
        methods: {
            initView:function () {
                let _this=this;
                var list_lis = new Swiper('#list_lis', {
                    freeMode: true,
                    freeModeMomentumRatio: 0.5,
                    slidesPerView: 'auto',
                });
//               /* $('#list_lis .swiper-slide').eq(0).addClass('nav_active');*/
                list_lis.on('tap', function(swiper) {
                    //效果
                 /*   alert(1)*/
                    _this.initTopView(list_lis,list_lis.clickedIndex);
                });
            },
            initTopView:function (list_lis,index) {
                var swiperWidth = $('#list_lis').width() //获取导航条宽度
                var maxTranslate = list_lis.maxTranslate();//移动位置
                var maxWidth = -maxTranslate + swiperWidth / 2;
               /* $('#list_lis .swiper-slide').removeClass('nav_active')
                $('#list_lis .swiper-slide').eq(index).addClass('nav_active')*/
                var slide = list_lis.slides[index]
                var slideLeft = slide.offsetLeft
              /*  alert(slideLeft)*/
                var slideWidth = slide.clientWidth
                var slideCenter = slideLeft + slideWidth / 2
                list_lis.setWrapperTransition(300)
                if (slideCenter < swiperWidth / 2) {
                    list_lis.setWrapperTranslate(0)
                } else if (slideCenter > maxWidth) {
                    list_lis.setWrapperTranslate(maxTranslate)
                } else {
                    var nowTlanslate = slideCenter - swiperWidth / 2
                    list_lis.setWrapperTranslate(-nowTlanslate)
                }
            },
                 /*获取导航的高度*/
            getListDetail:function () {
                window.history.go(-1);
            },
            /*点击切换事件*/
            catSwitch:function (cat_id) {
                this.initView();
                if (cat_id == this.cat_id) {
                    return false;
                }

                this.goodsList(cat_id);
            },
            orderBy:function (sort) {
               /* $('.list_Sales span')*/
                this.type=sort;
                this.style_1='';
                this.style_2="";
                this.style_3="";
                if(this.type==1){
                    this.style_1='style_m'
                };
                if(this.type==2){
                    this.style_2='style_m'
                };
                if(this.type==3||this.type==4){
                    /* alert(this.type);*/
                    this.style_3='style_m'
                };
                if (sort == this.data.sort) {
                    return false;
                };


                this.goodsList(this.cat_id, sort);
            },
            // 商品页跳转
            goods_info:function (id) {
                this.$router.push('/shopDetails?goods_id=' + id);
            },
            getMore:function () {
                this.goodsList(this.cat_id, this.data.sort, parseInt(this.data.page) + 1);
            },
            addCart:function (gid, number = 1,) {
                this.GLOBAL.addCart(this,gid,number);
                this.GLOBAL.get_te1(gid);
            },
            goodsList: function (cat_id, sort = 1, page = 1) {
                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Goods.php?mode=classifyGoods',
                    {
                        params: {
                            goods_id:this.id,
                            uid:this.GLOBAL.getCookie('uid'),
                            time:this.GLOBAL.getCookie('time'),
                            token:this.GLOBAL.getCookie('token'),
                            session_id:this.GLOBAL.getCookie('user_cart_id'),
                            cat_id:cat_id,
                            sort:sort,
                            page:page,
                            page_size:10
                        },
                        jsonp:'callback'
                    }
                ).then(function (res) {

                    if (res.body.code != 200) {
                        alert(res.body.msg);
                        return false;
                    }

                    if (page > 1) {
                        if (res.body.code == 200) {
                            this.goods_list = this.goods_list.concat(res.body.data.goods_list);
                            this.data.page = res.body.data.page;
                            this.data.sort = res.body.data.sort;
                        }
                        return false;
                    } else {
                        this.data = res.body.data;
                        this.goods_list = res.body.data.goods_list;
                        this.cat_id = res.body.data.cat_id;
                        this.cat_name = res.body.data.cat_list[ this.cat_id ];
                    }
                });
            },
        }
    }
</script>
<style>
    .wen_zi_m{
        display:block;
        min-height:0.1rem;
        width:auto;
        padding:0 0.05rem;
        color:#ffffff;
        font-size:0.24rem;
        word-break:break-all;
        /*line-height:0.5rem;*/
        -webkit-border-radius: 0.05rem;
        border-radius:0.05rem;
        position:absolute;
        left:0.25rem;
        top:0.18rem;
        background:deeppink;
    }
    /*第几折半价*/
    .list_Sales .style_m{
        color: #3db5fe;
    }
    .tl{
        height:0.5rem;
        width:100%;
        opacity:0;
    }
    .flyer-img{
        height:0.5rem;
        width:0.5rem;
        border-radius: 50%;
    }
   /* #list_m{
        overflow-y: scroll;
    }*/
 /*   #list_lis .swiper-wrapper .nav_active{
        color:#82a64f;
    }*/
    /*导航切换*/
 /*#list_l{
     overflow-y: scroll;
 }*/
    #list_lis .swiper-wrapper{
        width:100%;
        height:0.66rem;
        display:flex;
    }
    #list_lis .swiper-wrapper .swiper-slide{
       /* flex:1;*/
        width:1.6rem;
       /* margin:0 auto;*/
        display:block;
        flex-direction: column;
        line-height:0.65rem;
        text-align:center;
        color:#333;
    }
    #list_lis .swiper-wrapper .swiper-slide span{
        display:block;
        line-height: 0.65rem;
        color:#333;
        font-size:0.23rem;
        transition:all .1s ease;
    }
.swiper-container{
       /* width:100%;*/
        height:0.66rem;
       margin-bottom: 0;
    }
    /*结尾*/
   /* .Kiwifruit_right p:nth-of-type(4) img{
        position:absolute;
        width:0.35rem;
        height:0.35rem;
        left:3.6rem;
        top:0.1rem;
        right:0.26rem;
    }*/
    .Kiwifruit_right p:nth-of-type(4) span{

    }
    .Kiwifruit_right p:nth-of-type(4) time{
        font-size:0.18rem;

    }
    .Kiwifruit_right p:nth-of-type(4){
        width:1.8rem;
        height:0.68rem;
        line-height:0.6rem;
        /*text-align:center;*/
       /* text-indent: 0.5rem;*/
        color:#fc37b2;
        font-size:0.26rem;
       /* position:relative;*/

    }
    .Kiwifruit_right p:nth-of-type(3){
        width:2.2rem;
        height:0.43rem;
        line-height:0.43rem;
        /*text-align:center;*/
        /*text-indent: 0.5rem;*/
        color:#bababa;
        font-size:0.18rem;

    }
    .Kiwifruit_right p:nth-of-type(2){
        width:auto;
        height:0.35rem;
        line-height:0.35rem;
       /* text-align:center;*/
       /* text-indent: 0.5rem;*/
        color:#bababa;
        font-size:0.22rem;
        overflow: hidden;;
        text-overflow:ellipsis;
        white-space: nowrap;

    }
    .Kiwifruit_right p:nth-of-type(1){
       /* width:2.43rem;*/
        width:auto;
        height:0.35rem;
        line-height:0.35rem;
        /*text-align:center;*/
       /* text-indent: 0.5rem;*/
        overflow: hidden;;
        text-overflow:ellipsis;
        white-space: nowrap;
        color:#353535;
        font-size:0.22rem;

    }
    .Kiwifruit_all{
        float:right;
        height:0.7rem;
        width:auto;
        padding-top:1.4rem;
        padding-right:0.6rem;
        position:relative;

    }
    .Kiwifruit_all img{
        position:absolute;
        display:block;
        width:0.6rem;
        height:0.6rem;
        right: 0.2rem;
        top: 1.2rem;
        /* left:3.6rem;
         top:0.1rem;
         right:0.26rem;*/
    }
    .Kiwifruit_right{
        float: left;
        height: 1.9rem;
        width: 3.2rem;
        padding-top: 0.2rem;
    }
    .Kiwifruit_left{
        width: 2.3rem;
        height: 1.92rem;
         position: relative;
        padding-top: 0.18rem;
        float: left;
    }
    .Kiwifruit_left img{
        display: block;
        /* position: absolute; */
        width: 1.74rem;
        margin: auto;
        height: 1.74rem;
        /* left: 0.25rem; */
        /* top: 0.18rem; */
    }
    .Kiwifruit_list{
        width:100%;
        height:2.1rem;
        border-bottom:1px solid #f0f0f0;
    }
    /*<!--3553553-->*/
    .list_Sales{
        width:100%;
        height:0.6rem;
        display:flex;
        background:#f5f4f2;
        border-top:1px solid #e8e7e6;

    }
    .list_Sales img{
        display:block;
        width:0.15rem;
        height:0.23rem;
        position:absolute;
        left:1.4rem;
        top:0.18rem;

    }
    .list_Sales span:nth-of-type(3){
        position:relative;
    }
     .list_Sales span{
        display:block;
        line-height:0.6rem;
        text-align:center;
        color:#000000;
        font-size:0.24rem;
        text-decoration:none;
        flex:1;
    }
    #list_lis{
        width:100%;
        height:0.66rem;
        display:flex;
    }
   /* .list_lis span{
        flex:1;
        display:block;
        flex-direction: column;
        text-decoration: none;
        line-height:0.66rem;
        text-align:center;
        color:#333;
        font-size:0.23rem;
    }*/
    .list_top h3{
        width:100%;
        height:0.79rem;
        line-height:0.79rem;
        text-align:center;
        color:#45b8fe;
        font-size:0.28rem;
        font-weight:normal;

    }
    .list_top img{
        display:block;
        position:absolute;
        height:0.36rem;
        width:0.36rem;
        left:0.27rem;
        top:0.25rem;
    }
    .list_top{
        width:100%;
        height:0.79rem;
        border-bottom:1px solid #f0f0f0;
        position:relative;
    }

    #list_lis .swiper-wrapper #catSelected{
        color: #3db5fe;
        border-bottom: 1px solid #2eaffc;
    }

    #commodity_more{
        width:100%;
        height:0.85rem;
    }
    #commodity_more p{
        margin:0.2rem auto;
        width:1.61rem;
        height:0.42rem;
        line-height:0.42rem;
        text-align:center;
        color:#313131;
        border:1px solid #313131;
        font-size:0.2rem;
        border-radius:0.2rem;
    }
</style>
